<template>
  <div class="me-wrapper">
    <common-header :content="headerTitle" />
    <me-user v-if="showUser"
             :userInfo="userInfo"></me-user>
    <me-list></me-list>
    <tab-bar></tab-bar>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
// @ is an alias to /src
import tabBar from 'common/tab/tab'
import CommonHeader from 'common/header/header'
import MeUser from './components/user'
import MeList from './components/list'
import { mapState } from 'vuex'
export default {
  name: 'me',
  components: {
    tabBar,
    CommonHeader,
    MeUser,
    MeList
  },
  data () {
    return {
      headerTitle: '个人中心',
      userInfo: {}
    }
  },
  methods: {
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        this.getUserInfo()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    getUserInfo () {
      const userInfo = JSON.parse(this.$localStorage.get('USER_INFO'))
      if (userInfo == null) {
        this.$router.push({ path: '/' })
        return false
      }
      this.userInfo = userInfo
    }
  },
  created () {
    this.getState()
  },
  computed: {
    ...mapState(['person', 'contact', 'bank']),
    showUser () {
      return Object.keys(this.userInfo).length
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.me-wrapper
  initPosition()
  background-color $common_bgc_gray
  z-index 10
  overflow-y scroll
  padding()
  padding-top 108px
  padding-bottom 134px
</style>
